<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" height="90" bgColor="#0081ff" leftIconSize="32" leftIconColor="#ffffff">
			<view class="u-nav-slot margin-top-xl flex" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff"></u-icon>
			</view>
			<view slot="center" class="u-nav-slot margin-top-xl "
				style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 16px;"> {{device.deviceName}}</view>
				<view style="margin-top: 5px; font-size: 8px;">
					<text v-if="device.deviceStatus == '1'">(在线)</text>
					<text v-else>(离线)</text>
				</view>
			</view>
			<view class="u-nav-slot margin-top-xl flex" slot="right">
				<u-icon :name="foot==false? 'more-circle': 'trash'" size="32"
					:color="foot==false? '#FFFFFF' : '#d40000'"
					@tap="foot==false ? goInfo(device.deviceId) : delButton() "></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon :name="foot==false? 'edit-pen': 'checkbox-mark'" size="32" color="#FFFFFF" @tap="editButton()">
				</u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef H5 || APP -->
		<u-navbar leftIcon="" height="60" bgColor="#0081ff">
			<view slot="center" class="u-nav-slot " style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 16px;"> {{device.deviceName}}</view>
				<view style="margin-top: 5px; font-size: 8px;">
					<text v-if="device.deviceStatus == '1'">(在线)</text>
					<text v-else>(离线)</text>
				</view>
			</view>
			<view class="u-nav-slot flex" slot="right">
				<u-icon :name="foot==false? 'more-circle': 'trash'" size="32"
					:color="foot==false? '#FFFFFF' : '#d40000'"
					@tap="foot==false ? goInfo(device.deviceId) : delButton() "></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon :name="foot==false? 'edit-pen': 'checkbox-mark'" size="32" color="#FFFFFF" @tap="editButton()">
				</u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef H5 || APP -->
		<!-- <view style="display: flex;justify-content: center;">
			<text style="font-size: 20px; color: #00F5D4;margin-top: 10rpx;">六盘水炬元物联网提供技术支持</text>
		</view> -->
		<!-- #endif -->
		<scroll-view scroll-y refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="50" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
			refresher-background="#f1f1f1" class="page flex justify-center align-center flex-direction">
			<view class=" flex justify-center align-center flex-direction">
				<checkbox-group @change="CheckboxChange" class="grid col-2">
					<view v-for="(item,index) in buttonList" :key="index">
						<view class="checkbox_css" v-if="foot">
							<checkbox class='round' :class="item.checked?'checked':''"
								:checked="item.checked?true:false" :value="String(item.buttonId)"
								style="margin-left: 1vh;">
							</checkbox>
						</view>
						<but-comp :item="item" :foot="foot" :status="device.deviceStatus" @refresh="refresh"></but-comp>
					</view>
				</checkbox-group>

				<checkbox-group class="grid col-2" @change="CheckboxChange1">
					<view v-for="(item,index) in gaugeList" :key="item.numId">
						<view class="checkbox_css" style="margin-bottom: -20rpx;margin-left: 40rpx;" v-if="foot">
							<checkbox class='round' :data-type="item.type" :class="item.checked?'checked':''"
								:checked="item.checked?true:false" :value="String(item.numId)"
								style="margin-left: 1vh;">
							</checkbox>
						</view>
						<data-gauge :item="item" :foot="foot"></data-gauge>
					</view>
				</checkbox-group>
				<u-switch v-model="foot" @change="change" </u-switch>
					<checkbox-group class="grid col-1" @change="CheckboxChange1">
						<view v-for="(item,index) in lineList" :key="item.numId">
							<view class="checkbox_css" style="margin-bottom: -60rpx;margin-left: 40rpx;" v-if="foot">
								<checkbox class='round' :data-type="item.type" :class="item.checked?'checked':''"
									:checked="item.checked?true:false" :value="String(item.numId)"
									style="margin-left: 1vh;">
								</checkbox>
							</view>
							<data-line :item="item" :foot="foot" class="margin-top-xl"></data-line>
						</view>
					</checkbox-group>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<!-- 底部导航 -->
		<view class="cu-bar tabbar bg-gray shadow foot" v-if="foot">
			<scroll-view class="uni-swiper-tab uni-scroll-view " scroll-x>
				<icon-comp class="scrollx_items" icon="../../static/switch.png" :deviceId="device.deviceId"
					@refresh="refresh" type="button">
				</icon-comp>
				<icon-comp class="scrollx_items" icon="../../static/dashboard.png" :deviceId="device.deviceId"
					@refresh="refresh" type="gauge">
				</icon-comp>
				<icon-comp class="scrollx_items" icon="../../static/line.png" :deviceId="device.deviceId"
					@refresh="refresh" type="line">
				</icon-comp>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		isSubs
	} from '@/util/validate'
	export default {
		data() {
			return {
				triggered: false, //刷新
				imgUrl: this.imgUrl,
				device: {
					deviceId: null,
					deviceName: null,
					deviceStatus: null,
				},
				button: {
					buttonName: null,
					subscribe: null,
					opne: null,
					off: null
				},
				deviceName: null,
				shareDevice: null, //是否是共享的设备
				buttonList: [],
				gaugeList: [],
				lineList: [],
				timeOutEvent: 0, //记录触摸时长
				foot: false, //是否显示底部导航
				checkedList: [],
				checkedList1: [],
				isChecked: null
			};
		},
		onLoad: function(option) {
			this.deviceName = option.deviceName
			this.shareDevice = option.isShare
			//获取设备信息
			this.$http.request({
				url: 'app/device/info/' + option.deviceId,
				method: 'GET',
				success: (data) => {
					if (data.data && data.data.code == 0) {
						this.device = data.data.device
					}
				}
			})
			this.getInfo(option.deviceId)
		},
		methods: {

			// 下拉刷新
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (!this.triggered) //界面下拉触发，triggered可能不是true，要设为true 
					this.triggered = true;
				setTimeout(() => {
					this.getInfo(this.device.deviceId)
					this.triggered = false; //触发onRestore，并关闭刷新图标 
					this._freshing = false;
				}, 2000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},

			// 复选框，用于删除按钮
			CheckboxChange(e) {
				var items = this.buttonList
				let values = e.detail.value
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].buttonId == values[j]) {
							items[i].checked = !items[i].checked;
							break
						}
					}
				}
				this.checkedList = values
			},
			// 复选框，用于删除按钮
			CheckboxChange1(e) {
				let arr = this.gaugeList
				this.numberCheck(e, arr.concat(this.lineList))
			},

			numberCheck(e, arr) {
				var items = arr
				let values = e.detail.value
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].numId == values[j]) {
							items[i].checked = !items[i].checked;
							break
						}
					}
				}
				this.checkedList1 = values
			},
			//添加完成 刷新页面
			refresh() {
				this.getInfo(this.device.deviceId)
			},

			//删除按钮
			delButton() {
				let that = this
				uni.showModal({
					content: '【删除】危险操作，是否继续！',
					success: function(res) {
						if (res.confirm) {
							if (that.checkedList.length > 0) {
								that.$http.request({
									url: 'app/button/delete',
									method: 'GET',
									data: {
										'buttonIds': that.checkedList.toString(),
									},
									success: (data) => {
										that.getInfo(that.device.deviceId)
									}
								})
							}
							if (that.checkedList1.length > 0) {
								that.$http.request({
									url: 'app/number/delete',
									method: 'GET',
									data: {
										'numIds': that.checkedList1.toString(),
									},
									success: (data) => {
										that.getInfo(that.device.deviceId)
									}
								})
							}
						} else if (res.cancel) {}
					}
				})

			},

			//编辑，显示底部按钮
			editButton() {
				if (this.shareDevice == 'true') { // 判断是共享设备还是自己创建的设备
					uni.showToast({
						title: '权限不足，无法操作！',
						icon: 'none'
					})
					return
				}
				this.foot = !this.foot
				for (var i = 0; i < this.buttonList.length; ++i) {
					this.buttonList[i].checked = false;
				}
				for (var i = 0; i < this.gaugeList.length; ++i) {
					this.gaugeList[i].checked = false;
				}
				for (var i = 0; i < this.lineList.length; ++i) {
					this.lineList[i].checked = false;
				}
			},

			// 更新按钮信息
			updateButton() {
				let that = this
				this.$http.request({
					url: 'app/button/update',
					method: 'POST',
					data: {
						"buttonId": that.button.buttonId,
						"buttonName": that.button.buttonName,
						'subscribe': this.button.subscribe,
						"open": that.button.open,
						"off": that.button.off
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							that.getButtonList(this.device.deviceId)
							that.modalName = null
						}
					}
				})
			},

			//获取按钮信息
			getButton(buttonId) {
				this.$http.request({
					url: 'app/button/info/' + buttonId,
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.button = data.data.button
						}
					}
				})
			},

			//获取设备对应的按键列表
			getInfo(deviceId) {
				let that = this
				this.$http.request({
					url: 'app/device/allInfo/' + deviceId,
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							let butList = data.data.butList
							let gaugeList = data.data.gaugeList
							let lineList = data.data.lineList
							for (var i = 0; i < butList.length; i++) {
								butList[i].checked = false
							}
							for (let i = 0; i < gaugeList.length; i++) {
								gaugeList[i].checked = false
							}
							for (let i = 0; i < lineList.length; i++) {
								lineList[i].checked = false
							}
							that.gaugeList = gaugeList
							that.lineList = lineList
							that.buttonList = butList
						}
					}
				})
			},

			//进入设备详情页
			goInfo(deviceId) {
				uni.navigateTo({
					url: '/pages/basics/itemInfo?deviceId=' + deviceId + '&isShare=' + this.shareDevice
				})
			},


		}
	}
</script>
<style lang="scss">
	.u-page {
		padding: 0;
		flex: 1;
		background-color: $u-bg-color;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.page {
		height: 1500rpx;
		background-color: #f1f1f1;
	}

	.nav-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 3vh;
		padding: 1vh;
		width: 38%;
		border-radius: 2vh;
	}

	.device-list {
		width: 19vh;
		height: 18.5vh;
		border: #DDDDDD solid 2px;
		border-radius: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 二级菜单设置左右滑动 */
	.uni-swiper-tab {
		white-space: nowrap;
	}

	.scrollx_items {
		display: inline-block;
		margin-top: 3px;
	}

	.uni-scroll-view {
		text-align: center;
	}

	.checkbox_css {
		position: absolute;
		z-index: 2;
		margin-left: 50rpx;
		margin-top: 60rpx;
	}
</style>
